<template>
  <!--物料需求信息-->
  <el-card class="w-7/12 h-full mr-0.5 px-5 py-5">
    <template #header>
      <div class="card-header flex items-center color1">
        <i class="iconfont icon-jiancesheshi" style="font-size: 24px;"/>
        <span class="font-semibold text-xl inline-block ml-2">{{$t('common.MaterialInformation')}}</span>
      </div>
      <div class="divider"></div>
    </template>

    <div class="table-list w-full h-full">
      <el-table border id="out-table"
                :data="tableData"
                :fit="true" table-layout="fixed" header-align="center" stripe
                style="width:100%;height: 80%;"
                :header-cell-style="{color:'#000',textAlign:'center',borderColor:'#cce3fd',background:'rgba(190,220,253,0.79)'}"
                :cell-style="{textAlign: 'center', color:'#000',borderColor:'#cce3fd',background:'#fff'}"
                :row-class-name="getRowClassName">
        <el-table-column prop="materialCode" :label="$t('mes.orderNumber')" width="180"/>
        <el-table-column prop="name" :label="$t('common.MaterialNeed')" width="180"/>
        <el-table-column prop="requireQty" :label="$t('common.RequirQty')"/>
        <el-table-column prop="soCodeMaterialCode" :label="$t('common.Urgency')">
          <template #default="scope">
            <el-tag effect="dark" type="danger" size="large"
                    style="width: auto;font-weight: 600;font-size: 15px;padding: 0 10px">
              {{ scope.row.soCodeMaterialCode }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
<!--      <div class="demo-pagination-block">-->
<!--        <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 30, 50, 100]"-->
<!--                       :small="small" :disabled="disabled" :background="background"-->
<!--                       layout="total, prev, pager, next"-->
<!--                       :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>-->
<!--      </div>-->
    </div>
  </el-card>

</template>

<script setup>
import '@/assets/font/iconfont.css'
import { onMounted, reactive, ref } from 'vue'
import { getPriorityMaterial } from '@/api/warehouse/warehouseApi'

const tableData =ref([])
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 表格获取数据
const table = () => {
  // getProductDataByDate({
  //   PageSize: data.pageSize,
  //   CurrentPage: data.currentPage,
  // }).then(res => {
  //   data.tablesList = []
  //   data.total = 0
  //   if (res.Status === 200) {
  //     data.tablesList = res.LstProductData
  //     data.total = res.TotalDataCount || 0
  //   } else {
  //     data.tablesList = []
  //     data.total = 0
  //   }
  // })
}
const handleSizeChange = (val) => {
  data.pageSize = val
  table()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  table()
}
onMounted(() => {
  table()
})

const getRowClassName = ({
  row,
  rowIndex
}) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row' // 根据行索引返回类名

}
const getList =async ()=>{
  try {
   let res= await getPriorityMaterial()
    tableData.value = res.data
  }catch (e) {
    console.log(e)
  }

}
getList()
</script>


<style scoped lang="scss">
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 8px;
}


:deep(.el-pagination) {
  justify-content: flex-end;
  margin-top: 24px;

  .el-pagination__total {
    color: #000;
  }
}


</style>
